<template>
  <div id="login">
    <van-nav-bar title="登录" class="page_nav_bar">
      <template #left>
        <van-icon name="cross" color="#fff" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <van-form ref="form" @submit="onSubmit">
      <van-field
        v-model="form.mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="formRules.mobile"
        type="number"
        maxlength="11"
      >
        <template #left-icon> <i class="toutiao toutiao-shouji"></i> </template>
      </van-field>
      <van-field
        v-model="form.code"
        name="code"
        placeholder="请输入验证码"
        :rules="formRules.code"
        type="number"
        maxlength="6"
      >
        <template #left-icon>
          <i class="toutiao toutiao-yanzhengma"></i>
        </template>
        <template #button>
          <van-count-down
            @finish="isShowCountDown = false"
            v-if="isShowCountDown"
            :time="60 * 1000"
            format="ss s"
          />
          <van-button
            v-else
            size="mini"
            @click="onSendCode"
            native-type="button"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <div class="login_btn">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { sendCode, login } from '@/api/user.js'
export default {
  name: 'Loing',
  data () {
    return {
      form: {
        mobile: '',
        code: ''
      },
      formRules: {
        mobile: [
          { required: true, message: '请输入手机号' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确的手机号'
          }
        ],
        code: [
          { required: true, message: '请输入验证码' },
          { pattern: /^[0-9]{6}$/, message: '请输入正确的验证码' }
        ]
      },
      isShowCountDown: false
    }
  },

  // 定义方法
  methods: {
    async onSubmit () {
      try {
        const { data: res } = await login(this.form)
        this.$store.commit('setUser', res.data)
        Toast.success('登录成功')
        this.$router.push('/profile')
      } catch (err) {
        // console.dir(err)
        if (err.response && err.response.status === 400) {
          return Toast.fail('验证码错误或重新登录')
        }
        Toast.fail('系统错误')
      }
    },
    async onSendCode () {
      // 获取表单 验证部分表单 this.$refs.form.validate('mobile')
      try {
        // 如果有异常 不执行下面代码 直接进入 catch
        await this.$refs.form.validate('mobile')
      } catch (err) {
        return
      }
      try {
        await sendCode(this.form.mobile)
        Toast('发送成功')
        this.isShowCountDown = true
      } catch (err) {
        if (err.response && err.response.status === 429) {
          return Toast('频繁操作')
        }
        Toast('网络异常')
      }
    }
  }
}
</script>

<style scoped lang="less">
#login {
  .toutiao {
    font-size: 37px;
  }
  .login_btn {
    margin: 53px 28px;
    .vant-button {
      width: 694px;
      height: 88px;
      background: #6db4fb;
      border-radius: 10px;
      border: none;
    }
  }
}
.van-button--default {
  width: 152px;
  height: 46px;
  background: #ededed;
  border-radius: 23px;
  color: #666;
}
</style>
